<template>
	<view class="ticket-container">
		<view class="header">
			<text class="title">工单列表</text>
			<button class="add-btn" @click="addTicket">
				<text class="placeholder-icon"></text>
				<text>新增工单</text>
			</button>
		</view>
		
		<view class="filter-bar">
			<view class="filter-item" :class="{active: currentFilter === 'all'}" @click="filterTickets('all')">
				<text class="placeholder-icon"></text>
				<text>全部</text>
			</view>
			<view class="filter-item" :class="{active: currentFilter === 'processing'}" @click="filterTickets('processing')">
				<text class="placeholder-icon"></text>
				<text>处理中</text>
			</view>
			<view class="filter-item" :class="{active: currentFilter === 'completed'}" @click="filterTickets('completed')">
				<text class="placeholder-icon"></text>
				<text>已完成</text>
			</view>
		</view>
		
		<view class="ticket-list">
			<view class="ticket-item" v-for="ticket in filteredTickets" :key="ticket.id" @click="viewTicketDetail(ticket.id)">
				<view class="ticket-header">
					<text class="ticket-title">{{ ticket.title }}</text>
					<text class="ticket-status" :class="ticket.status">{{ getStatusText(ticket.status) }}</text>
				</view>
				<view class="ticket-content">
					<text class="ticket-desc">{{ ticket.description }}</text>
				</view>
				<view class="ticket-footer">
					<text class="ticket-time">{{ ticket.createTime }}</text>
					<text class="ticket-priority" :class="ticket.priority">{{ getPriorityText(ticket.priority) }}</text>
				</view>
			</view>
			
			<view class="no-data" v-if="!filteredTickets || filteredTickets.length === 0">
				<text class="placeholder-icon"></text>
				<view>暂无工单数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js';
	
	export default {
		data() {
			return {
				tickets: [],
				currentFilter: 'all'
			}
		},
		computed: {
			filteredTickets() {
				// 确保 tickets 是数组类型
				if (!Array.isArray(this.tickets)) {
					return [];
				}
				
				if (this.currentFilter === 'all') {
					return this.tickets;
				}
				return this.tickets.filter(ticket => ticket.status === this.currentFilter);
			}
		},
		onLoad() {
			this.loadTickets();
		},
		onPullDownRefresh() {
			this.loadTickets(() => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			loadTickets(callback) {
				request({
					url: '/tickets',
					method: 'POST',
					data: {}
				}).then(res => {
					// 确保返回的数据是数组格式
					if (res && Array.isArray(res.data)) {
						this.tickets = res.data;
					} else {
						// 如果返回的数据格式不正确，使用测试数据
						this.useTestData();
					}
					callback && callback();
				}).catch(err => {
					console.error('获取工单列表失败:', err);
					// 使用测试数据
					this.useTestData();
					callback && callback();
				});
			},
			useTestData() {
				this.tickets = [
					{
						id: 1,
						title: '网络连接问题',
						description: '办公室WiFi经常断开连接，影响正常工作',
						status: 'processing',
						priority: 'high',
						createTime: '2023-05-15 10:30'
					},
					{
						id: 2,
						title: '软件安装请求',
						description: '需要安装最新版的设计软件以完成项目',
						status: 'completed',
						priority: 'medium',
						createTime: '2023-05-14 14:20'
					},
					{
						id: 3,
						title: '硬件故障',
						description: '显示器出现闪烁问题，需要技术支持',
						status: 'processing',
						priority: 'high',
						createTime: '2023-05-16 09:15'
					},
					{
						id: 4,
						title: '系统升级咨询',
						description: '询问关于系统升级的详细信息和时间安排',
						status: 'processing',
						priority: 'low',
						createTime: '2023-05-17 16:45'
					},
					{
						id: 5,
						title: '账号权限申请',
						description: '申请访问特定系统的权限以便完成工作',
						status: 'completed',
						priority: 'medium',
						createTime: '2023-05-10 11:20'
					}
				];
				uni.showToast({
					title: '当前为测试数据',
					icon: 'none'
				});
			},
			addTicket() {
				uni.navigateTo({
					url: '/pages/ticket/add/add'
				});
			},
			viewTicketDetail(id) {
				uni.navigateTo({
					url: '/pages/ticket/detail/detail?id=' + id
				});
			},
			filterTickets(filter) {
				this.currentFilter = filter;
			},
			getStatusText(status) {
				const statusMap = {
					'all': '全部',
					'processing': '处理中',
					'completed': '已完成'
				};
				return statusMap[status] || status;
			},
			getPriorityText(priority) {
				const priorityMap = {
					'low': '低',
					'medium': '中',
					'high': '高'
				};
				return priorityMap[priority] || priority;
			}
		}
	}
</script>

<style scoped>
	.ticket-container {
		padding: 20rpx;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 40rpx;
		font-weight: bold;
	}
	
	.add-btn {
		background-color: #007AFF;
		color: white;
		border: none;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}
	
	.add-btn .placeholder-icon {
		margin-right: 10rpx;
	}
	
	.filter-bar {
		display: flex;
		justify-content: space-around;
		background-color: #f8f8f8;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
	}
	
	.filter-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}
	
	.filter-item .placeholder-icon {
		font-size: 40rpx;
		margin-bottom: 10rpx;
	}
	
	.filter-item.active {
		background-color: #007AFF;
		color: white;
		border-radius: 10rpx;
	}
	
	.ticket-item {
		background-color: white;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.ticket-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
	
	.ticket-title {
		font-size: 32rpx;
		font-weight: bold;
	}
	
	.ticket-status {
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
	}
	
	.ticket-status.processing {
		background-color: #ffeee0;
		color: #ff6b00;
	}
	
	.ticket-status.completed {
		background-color: #e8f8f5;
		color: #00b894;
	}
	
	.ticket-content {
		margin-bottom: 15rpx;
	}
	
	.ticket-desc {
		font-size: 28rpx;
		color: #666;
	}
	
	.ticket-footer {
		display: flex;
		justify-content: space-between;
	}
	
	.ticket-time {
		font-size: 24rpx;
		color: #999;
	}
	
	.ticket-priority {
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 5rpx;
	}
	
	.ticket-priority.low {
		background-color: #e3f2fd;
		color: #1e88e5;
	}
	
	.ticket-priority.medium {
		background-color: #fff8e1;
		color: #ff8f00;
	}
	
	.ticket-priority.high {
		background-color: #ffebee;
		color: #c62828;
	}
	
	.no-data {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
	}
	
	.placeholder-icon {
		width: 1em;
		height: 1em;
		display: inline-block;
	}
</style>